<template>
    <div class="shop_info_wrap" v-loading="over">
        <div class="shop_info_header">
            <i class="el-icon-arrow-left" @click="handleBack"></i>
            <p class="select_area_title">产品详情</p>
            <p style="visibility: hidden" class="select_area_submit"></p>
        </div>
        <div id='player' class="video" v-show="goodInfo && goodInfo.video && playing">
            <video-player  class="video-player vjs-custom-skin"
                           ref="videoPlayer"
                           :playsinline="true"
                           :options="playerOptions"
                           :x5-video-player-fullscreen="true"
                           @pause="onPlayerPause($event)"
                           @play="onPlayerPlay($event)"
            ></video-player>

        </div>
        <carousel v-if="goodInfo && goodInfo.images && !playing" :per-page="1" adjustableHeightEasing="300px"
                  :autoplay="true"
                  :centerMode="true" :loop="true"
                  :mouse-drag="false" :autoplayTimeout="5000">
            <slide v-if="goodInfo && goodInfo.video">
                <el-image
                        :src="$config.baseUrl + goodInfo.video.cover_path"
                        fit="contain"></el-image>
                <div id="control" @click="handlePlay"
                     style="position: absolute;left:50%;top:50%;transform:translate3d(-50%,-75%,0)">
                    <img style="width:150px;height: auto" src="../../assets/img/pofang@2x.png" alt="">
                </div>
            </slide>
            <slide v-for="(item,index) in goodInfo.images" :key="index">
                <el-image
                        :src="$config.baseUrl + item.file_path"
                        fit="contain"></el-image>
            </slide>
        </carousel>
        <div class="shop_info_money">
            <img src="../../assets/img/¥@2x.png" alt="">
            <span>{{goodInfo && goodInfo.price.split('.')[0]}}.<span>{{goodInfo && goodInfo.price.split('.')[1]}}</span></span>
            <p>
                {{goodInfo && goodInfo.title}}
            </p>
        </div>
        <div class="line"></div>
        <div class="shop_info_detail">
            <p class="info_detail_title">商品介绍</p>
            <p class="info_detail_content" v-html="goodInfo && goodInfo.description"></p>
        </div>

    </div>
</template>

<script>
    import {Carousel, Slide} from 'vue-carousel';
    import http from '../../libs/http';
    // import {mapGetters} from 'vuex'
    // import {mapState} from 'vuex'
    // import {mapState} from 'vuex'
    // const id = window.location.search.split('?')[1].split('&')[0].split('=')[1];
    // const name = window.location.search.split('?')[1].split('&')[1].split('=')[1];
    export default {
        name: 'index',
        components: {
            Carousel,
            Slide,
        },
        data() {
            return {
                /* id,
                 name,*/
                id: '',
                task_id:'',
                playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        //type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: "" //url地址
                    }],
                    poster: "", //你的封面地址
                    // width: document.documentElement.clientWidth, //播放器宽度
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                },
                playing: false,
                play: true,
                pause: false,
                goodInfo: null,
                over: true,
            }
        },
        mounted() {

        },

        created() {
            this.getParams()
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods: {
            getParams() {
                // 取到路由带过来的参数
                this.id = this.$route.query.id;
                this.task_id = this.$route.query.task_id;
                this.handleShopInfo(this.id)
            },

            handleShopInfo(id) {
                this.apiGet('api/goods/info/' + id).then((res) => {
                    this.goodInfo = res;
                    if(res.video){
                        this.playerOptions.sources[0].src = this.$config.baseUrl + res.video.file_path
                    }
                    if (res) {
                        this.over = false
                    }

                });

            },

            handlePlay(){
                this.playing = true;
                this.player.play()
            },

            handleBack() {
                this.$router.push({
                    name: 'task_info',
                    query:{
                        id:this.task_id
                    }
                });
            },

            onPlayerPlay(player) {
                this.player.play()
            },
            onPlayerPause(player) {
                // alert("pause");
                this.player.pause()
            }

        },
        watch: {
        },
        mixins: [http]
    }
</script>

<style lang="stylus">

    .shop_info_wrap
        width 100%
        text-align left
        padding-bottom 70px

        .shop_info_header
            height: 44px;
            font-size: 16px;
            color #333333;
            display flex;
            text-align: center;
            line-height: 44px;
            justify-content space-between
            border-bottom 1px solid #E6E6E6

            .select_area_title
                align-self center

            .select_area_submit
                margin-right 20px
                color: rgba(36, 191, 255, 1);

            i
                align-self center
                padding-left 20px

        .video
            position: relative
            width 100%;
            height auto
            .vjs-big-play-button
                font-size 30px
                width 50px
                height 50px!important
                line-height 50px!important
                border-radius 50%
                transform translate3d(30%,10%,0)
        .VueCarousel
            height 250px

            .VueCarousel-wrapper
                height 100%

                .VueCarousel-inner
                    height 100%

                    .VueCarousel-slide
                        height 100%
                        text-align center

                        img
                            height 250px

            .VueCarousel-pagination
                .VueCarousel-dot-container
                    margin-top 0 !important

        .shop_info_money
            padding 27px 24px 25px 20px

            img
                width 12px
                margin-right 12px

            span
                font-size: 30px;
                color: rgba(255, 81, 80, 1);

                span
                    font-size 23px

            p
                font-size: 15px;
                margin-top 12px
                font-weight: bold;
                line-height: 20px;
                color: rgba(38, 38, 38, 1);

        .line
            height: 8px;
            background: rgba(247, 247, 247, 1);

        .shop_info_detail
            padding 20px
            overflow: hidden;

            .info_detail_title
                font-size: 14px;
                margin-bottom 20px
                color: rgba(51, 51, 51, 1);

            .info_detail_content
                float: left;
                /*font-size: 13px;*/
                line-height: 26px;
                white-space: pre-line
                color: rgba(38, 38, 38, 1);

                img
                    width 100%

</style>
